import React, { useState } from 'react'
import { Table, Button, Pagination, Popconfirm } from 'antd';
import { useEffect } from 'react';
import { getUserListApi } from '../../apis/user';
import { delAccountApi } from '../../apis/user';
import { authModes } from '../../components/AuthComponent';
import AuthComponent from '../../components/AuthComponent';
import moment from 'moment/moment'
export default function AccountsList() {
  const columns = [
    {
      title: '用户名',
      dataIndex: 'account',
    },
    {
      title: '角色',
      dataIndex: 'userGroup',
    },
    {
      title: '会员日期',
      dataIndex: 'updateDate',
      render: ((date) => {
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    {
      title: '操作',
      render: (_, record) => (
        <Popconfirm
          placement="topLeft"
          title='确认删除该用户？'
          onConfirm={() => confirm(record._id)}
          okText="确认"
          cancelText="取消"
        >
          <AuthComponent auth='del_account' authMode={authModes.openOrDisabled}>
            <Button type="primary" danger>删除</Button>
          </AuthComponent>
        </Popconfirm>
      ),
    },
  ];
  // 设置用户数据
  const [data, setData] = useState([])
  // 设置每页数量
  const [loading, setloading] = useState(false)
  const [total, setTotal] = useState(0)
  // 类似于mounted的生命周期函数
  useEffect(() => {
    getData()
  }, [])
  // 获取用户数据
  async function getData(params = { pageSize: 5, pageNumber: 1 }) {
    setloading(true)
    let res = await getUserListApi(params)
    console.log('用户信息', res);
    setData(res.data)
    setTotal(res.totalCount)
    setloading(false)

  }
  //  分页
  function onChange(pageNumber, pageSize) {
    console.log('分页', pageSize, pageNumber);
    getData({ pageSize: pageSize, pageNumber: pageNumber })

  }
  // 确认删除
  async function confirm(_id) {
    console.log('删除', _id);
    await delAccountApi(_id)
    getData()
  }
  return (
    <Table
      loading={loading}
      rowKey={'_id'}
      columns={columns}
      dataSource={data}
      pagination={{
        total,
        pageSize: 5,
        onChange
      }}

    />
  )
}
